<template>
    <div>
        <van-swipe  class="my-swipe"  :autoplay="5000" indicator-color="white">
  <van-swipe-item><img src="../imgs/dva.jpg" alt=""  >  </van-swipe-item>
  <van-swipe-item><img src="../imgs/maoniang.png" alt=""></van-swipe-item>
  <van-swipe-item><img src="../imgs/north.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../imgs/你的名字君.jpg" alt=""></van-swipe-item>
  <template #indicator>
  <div class="custom-indicator">   
  </div>
  </template>
  
  </van-swipe>

<div class="warp">
<div class="head">
  
<van-image
  round
  width="80px"
  height="80px"
  :src="this.$store.state.vuexuserimgsrc || img2"
/>
<h2 class="h22"><p v-if='$store.state.vuexuserimgsrc'>
 {{$store.state.vuexname}}

</p>

<p v-if='!$store.state.vuexuserimgsrc'>

  请先登录
</p>
</h2>

<van-button round type="info"  color="rgba(255, 255, 255, 0.374)">编辑资料</van-button>



<div class="gs">
<p class="x">
  1
  <br>
  关注</p>
<p class="x">
  2
  <br>
  收藏</p>
</div>


<!-- <button @click="$store.commit('change','你的名字')">你的名字</button> -->

</div>
</div>
<div class="host">
 <h2>点赞    <van-icon name="like" size="40px" color="yellow" /></h2> 
</div>
<div class="host2">
 <h2>    <van-icon name="fire" size="40px" color="yellow" />获赞</h2>
</div>
 

<van-cell  size="large" title="修改密码" is-link />
<van-cell size="large"  title="联系我们" is-link />
<van-button round type="info" v-if="!$store.state.vuexuserimgsrc" @click="$router.push('/login')" color="rgba(87, 198, 23, 0.682)" size="large"> <p>登录</p> 
</van-button>
<van-button round type="info"  v-if="$store.state.vuexuserimgsrc" @click="exitlogin" color="rgba(87, 198, 23, 0.682)" size="large"> 
<p >退出登录 </p></van-button>
    <tabars></tabars>
    </div>
</template>
<script>
import { Image as VanImage } from 'vant';
import tabars from '@/components/bottom'
import { getLine } from '@/api/home'
export default {
  
data(){
    return {
// ll:this.$store.state.vuexname,
 imgSrc1:'',
 img2:'https://bpic.588ku.com/element_origin_min_pic/19/04/10/a64c2e33786b9dc79d848bcdba465719.jpg'
  
  }
},

components:{
  [tabars.name]: tabars,
  [VanImage.name]:VanImage,
  
},
mounted(){
this.$store.dispatch('video');
// this.getuser()
console.log('我是头像',this.$store.state.vuexuserimgsrc)
console.log('vuex用户名字',this.$store.state.vuexname)


},

methods:{
   getuser(){
    let a= localStorage.getItem('dw-token')
    console.log('个人资料',a)
    getLine('/user/getuserInfo',{token:a}).then(res=>{
      console.log('个人资料',res)
     
    //  this.$store.state.vuexname=this.username
     console.log(this.$store.state.vuexname)
   
    })
   },
 

   //退出登录
   exitlogin(){
  localStorage.setItem('dw-avatar','')
  console.log( '我是本地头像',localStorage.getItem('dw-avatar'));
   localStorage.setItem('dw-anickname','')
      this.$store.commit('getvuexname',localStorage.getItem('dw-anickname'))
      this.$store.commit('getvuexuserimgsrc',localStorage.getItem('dw-avatar'))
    this.$store.commit('changefalse',false)
    
   }
  
}
}
</script>
<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
   
     opacity: 0.6;

  }
  .my-swipe{
     background-color: black;
  }
  
  .head {
    position: absolute;
    top: 10px;
    left: 10px;
  

    
    display: flex;
}
.h22{
  color: rgba(255, 255, 255, 0.756);
    margin: 10px;
    font-size: 15px;
    margin-right: 20vw;
}
.x{
  color: rgba(255, 255, 255, 0.712);
    position: relative;
   bottom: -20vw;
   width: 60px;
   text-align: center;
   margin-left: 60px;
margin-right: 60px;
   font-size: 30px;


}
.gs{
  display: flex;
  position: absolute;
bottom: -20vw;


}

</style>
<style scoped>
.van-cell__title {
    text-align: left;
    font-size: 20px;
 
}
.host{
  border-bottom:rgba(19, 139, 29, 0.285) solid 2px ;
  
  width: 40vw;
  float: left;
  text-align: right;
}
.host2{
  border-bottom:rgba(19, 139, 29, 0.285) solid 2px ;
  width: 40vw;
  float: right;
  text-align: left;
}
.h22{
  width: 20vw;
}
 img{
    
    margin: 0;
  
 color: rgb(164, 180, 29);
    width: 100vw;
    height: 60vw;
   
  }
 .van-cell--large {
    padding-top: 6.2vw;
    padding-bottom: 6.2vw;
}
button.van-button.van-button--info.van-button--large.van-button--round {
    width: 90vw;
    margin-top: 2vw;
  
}

</style>